<template>
  <div class="mine-son">
    <x-header :left-options="{showBack: true}" :title="title"></x-header>
    <div class="scroll_container container">
      <pull-to :top-load-method="refresh" :bottom-load-method="loadMore">
        <ul class="item">
          <li v-for="(i, index) in list" :key="index">{{i.name}}<span class="s1">我的</span></li>
        </ul>
      </pull-to>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, Cell, CellBox, XButton, Box } from "vux";
import PullTo from "vue-pull-to";
let list = [
  {
    name: "xiaoming"
  },
  {
    name: "damao"
  }
];
export default {
  data() {
    return {
      title: "我的son",
      list: [
        {
          name: "小明"
        },
        {
          name: "damao"
        }
      ]
    };
  },
  components: {
    XHeader,
    Group,
    Cell,
    CellBox,
    XButton,
    Box,
    PullTo
  },
  methods: {
    refresh(loaded) {
      setTimeout(() => {
        // this.dataList.reverse();
        this.list = list;
        loaded("done");
      }, 1000);
    },
    loadMore(loaded) {
      setTimeout(() => {
        this.list = this.list.concat(list);        
        loaded("done");
      }, 1000);
    }
  }
};
</script>

<style scoped lang="less">
.mine-son {
  // background: @mycolor;
  .container {
    .item {
      li {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
      }
    }
  }
}
</style>
